<template>
  <div class="iframe flex-1">
    <Loading v-show="browserLoading"></Loading>
    <template v-if="currentBrowserTab.type === 'link'">
      <iframe @load="onLoad" :src="currentBrowserTab.src" v-show="!browserLoading"></iframe>
    </template>
    <template v-else-if="currentBrowserTab.type === 'html'">
      <iframe @load="onLoad" :srcdoc="currentBrowserTab.src"></iframe>
    </template>
  </div>
</template>

<script setup lang="ts">
import type Loading from '@/components/loading/Loading.vue';
import { browserLoading, currentBrowserTab } from '../data/browser';

const onLoad = () => {
  browserLoading.value = false;
};
</script>

<style lang="scss" scoped>
iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--hover-bg);
}

.loading {
  width: 100%;
  height: 100%;
  color: #999;
}
</style>
